<template>
  <div class="navigation-btns">
     <div ref="box" class="box" 
        @mousedown="mousedown" @touchstart="mousedown"
        :style="{transform: 'rotate(' + relaAngle + 'deg)'}">
    </div>
    <!-- 内层按钮 -->
    <div class="circle-btns">
      <button class="btn-top"> <div>></div> </button>
      <button class="btn-left"> <div>></div> </button>
      <button class="btn-right"> <div>></div> </button>
      <button class="btn-bottom"> <div>></div> </button>
    </div>
    <!-- 内层按钮结束 -->
  </div>
</template>
<script>
export default {
  title: "多想操控",
  data() {
    return {
      centerX: 0,
      centerY: 0,
      isMove: false,
      relaAngle: 0,
      currentAngle: 0,
    }
  },
  mounted() {
      const element = this.$refs.box
      const rect = element.getBoundingClientRect();
      this.centerX = parseFloat(rect.left + rect.width / 2);
      this.centerY = parseFloat(rect.top + rect.height / 2);
      window.addEventListener('mousemove', this.mousemove)
      window.addEventListener('mouseup', this.mouseup)
      window.addEventListener('touchmove', this.mousemove)
      window.addEventListener('touchend', this.mouseup)
  },
  methods: {
    getDragAngle(event) {
        event.stopPropagation
        const x = (event.clientX || event.targetTouches[0].clientX) - this.centerX
        const y = this.centerY - (event.clientY || event.targetTouches[0].clientY)
        const dreg = Math.atan2(y, x) * 180 / Math.PI;        
        return -dreg
    },
    mousedown(event) {
      this.currentAngle = this.getDragAngle(event)
      this.isMove = true;
    },
    mousemove(event) {
        if (this.isMove) {
          const moveAngle = this.getDragAngle(event)
          const rot = moveAngle - this.currentAngle
          this.currentAngle = moveAngle
          this.relaAngle = this.getRotAngle(this.relaAngle + rot)
        }
    },
    mouseup(event) {
        if (this.isMove) {
      　　  this.isMove = false;
  　　  }
    },
    getRotAngle(angle) {
      if (angle >= 180) {
        return angle - 360
      } else if (angle <= -180) {
        return angle + 360
      } else {
        return angle
      }
    }
  },
  beforeDestroy() {
      window.removeEventListener('mousemove', this.mousemove)
      window.removeEventListener('mouseup', this.mouseup)
      window.removeEventListener('touchmove', this.mousemove)
      window.removeEventListener('touchend', this.mouseup)
  }
}
</script>
<style lang="scss">
.navigation-btns {
  position: relative;
  height: 150px;
  width: 150px;
}
  .box {
    position: relative;
    width: 150px;
    height: 150px;
    background: #cccccc;
    position: relative;
    border-radius: 50%;
    border: 3px solid #999;
    background: rgba($color: #999, $alpha: 0.2);
    &::before {
      content: 'N';
      position: absolute;
      left: 68px;
      top: -12px;
      background: #FFF;
      border: 2px solid #666;
      border-radius: 5px;
      font-size: 12px;
      
    }
    &:active {
      border: 3px solid #0659DD;
      background: rgba($color: #0659DD, $alpha: 0.2);
    }
  }

  .circle-btns {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
  button {
    transform: rotate(45deg);
    width: 70px;
    height: 70px;
    position: absolute;
    border: none;
    outline: none;
    // &:hover,
    &:active
     {
      color: #fff;
      background: #019BF5;
    }
    div {
      position: relative;
      font-size: 25px;
      font-weight: bold;
    }
  }
  .btn-top {
    display: block;
    left: 15px;
    top: -34px;
    div {
      top: 15px;
      left: 10px;
      transform: rotate(-135deg);
    }
  }
  .btn-left {
    top: 15px;
    left: -34px;
    div {
      left: 15px;
      bottom: 10px;
      transform: rotate(135deg);
    }
  }
  .btn-right {
    top: 15px;
    left: 64px;
    div {
      right: 15px;
      top: 10px;
      transform: rotate(-45deg);
    }
  }
  .btn-bottom {
    display: block;
    margin: auto;
    top: 64px;
    left: 15px;
    div {
      bottom: 15px;
      right: 10px;
      transform: rotate(45deg);
    }
  }
}

</style>